<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" title="return">
			</c-navigation-bar>
			<view class="tabs">
				<view class="tabs_aside" :class="active===0?'active':''" @click="active=0">
					Unhandled
				</view>
				<view class="tabs_aside" :class="active===1?'active':''" @click="active=1">
					Processed
				</view>
			</view>
			<view class="productBoxAll">
				<view class="productBox" v-for="(item,index) in shelfList" :key="index" v-if="active===0">
					<view class="productBox_top">
						<view class="flexBox">
							<u-image :src='$u.file.getMedieUrl(item.image)' style='height: 160rpx;width: 160rpx;'></u-image>
							<view class="middle-box">
								<uni-tooltip :content="item.goodsname">
									<view class="productBox-tittle">
										{{ item.goodsname }}
									</view>
								</uni-tooltip>
								<uni-tooltip :content="item.skuName">
									<view class="productBox-intro">
										{{ item.skuName }}
									</view>
								</uni-tooltip>
								<view class="productBox-price">${{ (item.price*item.totalNum).toFixed(2) }}</view>
							</view>
						</view>

						<view class="check-box">
							<u-checkbox @change="checkChange(index)" :value="item.ck" shape="circle" :name="item.name">
								<!-- {{item.name}} -->
							</u-checkbox>
							<view class="numBox">
								X{{item.totalNum}}
							</view>
						</view>
					</view>
					<view class="productBox_bottom">

						<view class="statistics">
							<view class="">
								Order time
							</view>
							<view class="statistics_two">
								{{publicJS.timeZoneSwitching(item.createTime)}}
							</view>
						</view>


					</view>
				</view>
				<view class="productBox" v-for="(item,index) in notShelfList" :key="index" v-if="active===1">
					<view class="productBox_top">
						<view class="flexBox">
							<u-image :src='$u.file.getMedieUrl(item.image)' style='height: 160rpx;width: 160rpx;'></u-image>
							<view class="middle-box">
								<uni-tooltip :content="item.goodsname">
									<view class="productBox-tittle">
										{{ item.goodsname }}
									</view>
								</uni-tooltip>
								<uni-tooltip :content="item.skuName">
									<view class="productBox-intro">
										{{ item.skuName }}
									</view>
								</uni-tooltip>
								<view class="productBox-price">${{ item.price }}</view>
							</view>
						</view>

					</view>
					<view class="productBox_bottom">
						<view class="statistics">
							<view class="">
								Order number
							</view>
							<view class="statistics_two">
								1111
							</view>
						</view>
						<view class="statistics">
							<view class="">
								Order time
							</view>
							<view class="statistics_two">
				
								{{publicJS.timeZoneSwitching(item.createTime,'DD-MM-yyyy')}}
							</view>
						</view>
						<view class="statistics">


						</view>
					</view>
				</view>

			</view>
			<view class="purchase-bottom" v-if="active===0">
				<view class="purchase-count">
					<view class="text5">
						已选择
					</view>
					<view class="text6">
						{{total}}
					</view>
				</view>
				<view class="pay-btn">
					<u-button type="primary" class="custom-style" @click="returns()">returns</u-button>
				</view>
			</view>

		</c-layout>
		<!-- 头部 -->



	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				active: 0,
				shelfList: [],
				notShelfList: [],
			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			getList() {

				this.$u.get('/app/shop/balance').then(res => {
					let data={
						shopId:'',
					}
					this.$u.post(`/app/shopOrderReturnApproved/shoPage`).then(r => {
						r.data.records.forEach(item => {
							if (item.status) {
								this.notShelfList.push(item)
							} else {
								this.shelfList.push(item)
							}
						})
						this.shelfList.forEach((item) => {
							this.$set(item, 'ck', false);
						});
					})
				})
			},
			checkChange(index) {
				this.shelfList[index].ck = !this.shelfList[index].ck;

			},
			returns() {
				let arr = []
				this.shelfList.forEach((item) => {
					if (item.ck) {
						arr.push(item)
					}
				});
				if (arr.length == 0) {
					this.$u.toast('Please select product');
					return false
				}
				this.$u.post(`/shopReturnPurchase/add`, arr).then(r => {
					this.getList()
				})
			},

		},
		computed: {
			total() {
				let num = 0
				this.shelfList.forEach(item => {
					if (item.ck)
						num++
				})
				return num
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {




		}
	}
</script>

<style lang="scss" scoped>
	.modify-page {
		height: 100vh;
		padding: 0 44rpx;

		.tabs {

			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;
				transition: transform .4s;

			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.productBoxAll {
			height: 70vh;
			overflow: auto;

			.productBox {
				height: 310rpx;
				background: #FFFFFF;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				opacity: 1;
				border: 2rpx solid #E1E8E8;
				margin-bottom: 30rpx;
				padding: 20rpx;

				.productBox_top {
					display: flex;
					padding-bottom: 10px;
					border-bottom: 1px solid #F2F3F5;
					align-items: center;
					justify-content: space-between;

					.flexBox {
						display: flex;
					}

					.check-box {
						height: 94px;
						display: flex;
						flex-wrap: wrap;
						width: 40px;
						justify-content: flex-start;
						align-content: space-around;
					}

					.numBox {
						background: #EEEEEE;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						font-size: 28rpx;
						font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
						font-weight: 400;
						color: #000000;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx;
					}

					.middle-box {
						width: 240rpx;
						padding-left: 20rpx;

						.productBox-tittle {
							font-size: 30rpx;
							color: #000000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.productBox-intro {
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin: 20rpx 0 30rpx 0;
						}

						.productBox-price {
							font-size: 30rpx;
							color: #000000;
							font-weight: 500;
						}
					}
				}

				.productBox_bottom {
					margin-top: 8px;
					display: flex;
					flex-wrap: wrap;
					/* flex: 1; */
					height: 53px;
					align-content: space-between;

					.statistics {
						display: flex;
						font-size: 20rpx;
						font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
						font-weight: 400;
						color: #91909A;
						height: 60rpx;
						align-items: center;
						width: 100%;
						justify-content: space-between;

						.statistics_two {
							margin-left: 58rpx;
							color: #1B1D29;
						}
					}
				}
			}

		}

		.purchase-bottom {
			display: flex;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;

			justify-content: space-between;
			background-color: #1B1D29;
			padding: 32rpx 44rpx 52rpx 50rpx;

			.purchase-bottom {
				max-width: 200rpx;
				padding-left: 30rpx;
			}

			.text5 {
				color: #91909A;
				font-size: 28rpx;
			}

			.text6 {
				color: #91909A;
				font-size: 35rpx;
				font-weight: 400;

			}

			.custom-style {
				width: 280rpx;
				height: 100rpx;
				background: #2934D0;
				border-radius: 20rpx;
			}

		}

	}
</style>
